﻿@model IEnumerable<HYBYSoft.Company.Models.Links>
@{
    ViewBag.Title = "Short";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutPage1.cshtml";
}
<script type="text/javascript">

    $(function () {
        $(".link-title").bind('mouseover', function () {
            $(this).css("cursor", "move")
        });
        var $show = $("#loader");
        var $orderlist = $("#orderlist");
        var $list = $("#list");
        $list.sortable({ opacity: 0.6, //设置拖动时候的透明度         
            revert: true, //缓冲效果         
            cursor: 'div-mouseover', //拖动的时候鼠标样式        
            handle: '.link-title',  //可以拖动的部位，模块的标题部分        
            update: function () {
                var new_order = [];
                $list.children(".div-link").each(function () {
                    new_order.push(this.title);
                });
                var newid = new_order.join(',');
                $orderlist.val(newid);
                alert(newid);
            }
        });
    });

</script>
<div id="content">
    <div style="margin-top: 10px;">
    </div>
    <p>
        <span id="sitemap">当前位置：友情链接排序</span>
    </p>
    <div class="div-link-header">
        <div class="link-icon">
            图标
        </div>
        <div class="link-title">
            链接标题
        </div>
        <div class="link-url">
            链接地址
        </div>
        <div style="clear: both;">
        </div>
    </div>
    <div class="div-link" id="list">
        @foreach (var item in Model)
        {
            <div class="div-link" title="@item.LinkID" >
                <div class="link-icon">
                    @{
                                    if (item.Icon == null || item.Icon.Length == 0)
                                    {
                        <span></span> 
                                    }
                                    else
                                    {
                        <img alt="链接图标" src="/UplodeImages/@item.Icon" width="20" height="20" />
                                    }
                    }
                </div>
                <div class="link-title">
                    @item.Title
                </div>
                <div class="link-url">
                    <a href=" @item.Url" target ="_blank">@item.Url</a>
                </div>
                <div style="clear: both;">
                </div>
            </div>
        }
    </div>
    <div style="clear: both;">
    </div>
    <div id="loader">
    </div>
    <div style="clear: both;">
        <input type="hidden" id="orderlist" runat="server" />
    </div>
</div>
